<template>
		<!-- 海报轮播图 -->
		<swiper class="poster-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" style="height: 500rpx;">
			<swiper-item v-for="(poster, index) in posterList" :key="index">
				<image :src="poster" class="poster-image" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<van-notice-bar left-icon="volume-o" text="分享你的潮玩故事，展示你的潮玩收藏！" />

	<view class="playershow-container">
		<view class="playershow-waterfall">
			<playerWaterfallsFlow :wfList="list" @itemTap="itemTap" />
		</view>
	</view>
		<!-- 回到顶部按钮 -->
		<view class="back-to-top" :class="{ 'show': true }" @click="scrollToTop">
			<view class="back-to-top-icon">
				<van-icon name="arrow-up" size="24px" color="#fff" />
			</view>
		</view>
</template>


<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import playerWaterfallsFlow from '../playerWatefallsFlow/playerWatefallsFlow.vue'
	import {
		getPlayerShowInfo
	} from "../../api/playerShow.js"
	// 定义响应式数据
	const list = ref([]);
	const requiredData = ref([]);
	const currentPage = ref(1); // 添加页码计数器
	const pageSize = 50; // 每页数据量
	const searchValue = ref(''); // 搜索值
	const isLoading = ref(false); // 添加加载状态控制
	const hasMore = ref(true); // 添加是否还有更多数据的标志
	const playerShowParams = reactive({
		pageNum: 1,
		pageSize: 50
	})
	const posterList = ref([
		"https://blindstore.oss-cn-hangzhou.aliyuncs.com/static/swiper/%E4%B8%8A%E6%B5%B7%E8%BF%AA%E6%96%AF%E5%B0%BC.jpg",
		"https://blindstore.oss-cn-hangzhou.aliyuncs.com/static/swiper/%E5%A4%95%E9%98%B3.jpg",
		"https://blindstore.oss-cn-hangzhou.aliyuncs.com/static/swiper/%E6%96%B0%E5%B9%B4%E6%B8%B8%E7%A5%9E.jpg",
		"https://blindstore.oss-cn-hangzhou.aliyuncs.com/static/swiper/%E6%AD%A6%E5%8A%9F%E5%B1%B1.jpg"
	]);
	// 搜索处理函数
	const onSearch = () => {
		currentPage.value = 1; // 重置页码
		getRequiredData(); // 重新获取数据
	};
	// 模拟请求数据
	onMounted(() => {
		setTimeout(() => {
			getRequiredData()
		}, 500);
	});

	// 模拟触底刷新
	onReachBottom(() => {
		setTimeout(() => {
			const newData = requiredData.value.slice(0, 50);
			list.value = [...list.value, ...newData];
			// console.log('list.data',list.value);
			console.log('newData', newData);
		}, 500);
	});

	// 模拟上拉刷新
	onPullDownRefresh(() => {
		setTimeout(() => {
			const newList = [...requiredData.value].reverse();
			list.value = newList;
			uni.stopPullDownRefresh();
		}, 500);
	});
	// 获取商品信息
	const getRequiredData = () => {
		getPlayerShowInfo(playerShowParams).then(res => {
			// 将res.data赋值给requiredData
			console.log("res.data",res.data)
			requiredData.value = [...res.data.rows];
			list.value = [...res.data.rows];
			console.log('list.data', list.value);
		})
	}
	// item 点击事件处理函数
	const itemTap = (item) => {

	};
		// 回到顶部方法
		const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	};
</script>

<style lang="scss" scoped>
	/* 设置轮播图容器的宽度和高度 */
	.poster-swiper {
		width: 100%;
		height: 400rpx;
		/* 这里可以根据需要调整轮播图的高度 */
	}

	/* 设置图片的宽度和高度 */
	.poster-image {
		width: 100%;
		height: 100%;
		border-radius: 2++0rpx;
	}

	.page {
		min-height: 100vh;
		background: #eee;
	}
	.back-to-top {
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		z-index: 999;
		opacity: 0;
		transform: translateY(100rpx);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
		
		&.show {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}
		
		.back-to-top-icon {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #1989fa, #39b9fa);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 20rpx rgba(25, 137, 250, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 10rpx rgba(25, 137, 250, 0.2);
			}
			
			&::before {
				content: '';
				position: absolute;
				top: -4rpx;
				left: -4rpx;
				right: -4rpx;
				bottom: -4rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, rgba(25, 137, 250, 0.2), rgba(57, 185, 250, 0.2));
				z-index: -1;
				animation: pulse 2s infinite;
			}
		}
	}
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.4;
		}
		100% {
			transform: scale(1);
			opacity: 0.8;
		}
	}
</style>